<template>
  <el-menu
    router
    class="el-menu-vertical-demo"
    background-color="#304156"
    text-color="#fff"
    active-text-color="#409eff">
    <!-- 自定义组件：遍历路由表，生成左侧菜单 -->
    <AsideSubMeun :menus="menus" v-if="menus.length"></AsideSubMeun>
  </el-menu>
</template>

<script lang="ts" setup>
import {
  computed, getCurrentInstance, onMounted, ref, watch,
} from 'vue';
import AsideSubMeun from '@/views/index/AsideSubMeun.vue';
import { useStore } from 'vuex';
import { Permission } from '@/types/interface/auth_interface';

const { proxy } = getCurrentInstance();
const store = useStore();
let menus = ref<Permission[]>([]);
// onMounted(() => {
//   console.log('菜单');
//   console.log(store.state.name);
//   console.log(store.state.person);
//   console.log([...store.state.routes]);
//   menus.value = [...store.state.routes];
// });

// const menus = computed(() => {
//   console.log(store.getters.getRoutes);
//   return store.getters.getRoutes;
// });

onMounted(async () => {
  menus.value = store.state.routes;
});

// onMounted(() => {
//   // await store.dispatch('getRoutes');
//   menus.value = store.state.routes;
//   // const resData = await new proxy.$Request(proxy.$urls.API_URL_BACKSTAGE_ADMIN_MENU).get();
//   // menus.value = resData.data;
// });
// menus.value = computed(() => {
//   if (store.state.routes && store.state.routes.length > 0) {
//     console.log('菜单数组');
//     return store.state.routes;
//   }
//   return [];
// });
// watch(() => store.state.routes, (newVal:any, oldVal:any) => { // 开启深度监听
//   console.log('bb', oldVal, newVal);
//   menus.value = newVal;
// }, { deep: true, immediate: true });
</script>

<style scoped>
.el-menu {
  height:100%; /*将左侧菜单栏高度拉升到100%*/
}
</style>
